<template>
    <div>
      <div class="detailsBox">
        <section class="details">
            <div class="collection"><span class="iconfont icon-xin"></span>收藏</div>
            <div class="pic">
                <img :src="courseDeail.coverFileUrl" alt="">
            </div>
            <div class="content">
                <h4>{{courseDeail.courseTitle}}</h4>
                <span>累计{{courseDeail.participationsCount}}人学习</span>
                <span><a-rate allow-half disabled v-model="score" >
                      <a-icon slot="character" type="heart"   />
                      </a-rate>
                </span>
                <span class="iconfont icon-xing xing"></span>
                <span class="iconfont icon-xing xing"></span>
                <p v-if="courseDeail.isFree==1">免费</p>
                        <p v-else class="payfor">
                          <span>￥{{courseDeail.discountPrice}}</span>
                          <span>￥{{courseDeail.coursePrice}}</span>
                           </p>
                <!-- <button>立即观看</button> -->
                <a-button type="primary">
                    <span v-if="courseDeail.isFree==1">立即观看</span>
                    <span v-else>立即购买</span>
                </a-button>
                
            </div>
    </section>
    <div class="tabBox">
            <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="课程描述" v-html="courseDeail.courseDetail">
      </a-tab-pane>
      <a-tab-pane key="2" tab="目录" force-render>
        <!-- 目录 -->
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade" id="two">
              <div class="sectionList" v-for="(item,index) in courseDeail.sections" :key="index">
                <h3>{{index+1}}.{{item.sectionName}}</h3>
                <div class="courseLive">
                  <dl v-for="(item2,index2) in item.subSections" :key="index2">
                    <dt>{{index+1}}- {{index2+1}}
                      <span class="minTitle">{{item2.sectionName}}</span>
                    </dt>
                  </dl>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="three">
            </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="评论">
        <div class="box">
          <!-- 发表评论 -->
          <div>
    <a-list
      v-if="comments.length"
      :data-source="comments"
      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
      item-layout="horizontal"
    >
      <a-list-item slot="renderItem" slot-scope="item,">
        <a-comment
          :author="item.author"
          :avatar="item.avatar"
          :content="item.content"
          :datetime="item.datetime"
        />
      </a-list-item>
    </a-list>
    <a-comment>
      <a-avatar
        slot="avatar"
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        alt="Han Solo"
      />
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="4" :value="value" @change="handleChange" />
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
            Add Comment
          </a-button>
        </a-form-item>
      </div>
    </a-comment>
  </div>

          <!-- 评论列表 -->
          <!-- <a-comment>
    <template slot="actions">
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          喜欢的{{ likes }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <a-icon
            type="dislike"
            :theme="action === 'disliked' ? 'filled' : 'outlined'"
            @click="dislike"
          />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          不喜欢的{{ dislikes }}
        </span>
      </span>
      <span key="comment-basic-reply-to">Reply to</span>
    </template>
    <a slot="author">穆立静</a>
    <a-avatar
      slot="avatar"
      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      alt="Han Solo"
    />
    <p slot="content">
      We supply a series of design principles, practical patterns and high quality design resources
      (Sketch and Axure), to help people create their product prototypes beautifully and
      efficiently.
    </p>
    <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
      <span>{{ moment().fromNow() }}</span>
    </a-tooltip>
  </a-comment> -->
        </div>
        <!-- 评论 -->
        

      </a-tab-pane>
    </a-tabs>
        </div>
      </div>
        
    </div>
</template>
<script>
import {comment} from "../api/api"
export default {
    name:"viewDetail",
    data(){
        return{
            courseDeail:{},
            store:"",
            // 评论、
            likes: 0,
            dislikes: 0,
            action: null,
            // moment,
            // 发表评论
            comments: [],
            submitting: false,
            value: '',
            
            }
          },
    methods: {
    callback(key) {
      console.log(key);
    },
    // 评论
    like() {
      this.likes = 1;
      this.dislikes = 0;
      this.action = 'liked';
    },
    dislike() {
      this.likes = 0;
      this.dislikes = 1;
      this.action = 'disliked';
    },
    // 发表评论
        handleSubmit() {
      if (!this.value) {
        return;
      }

      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            // datetime: moment().fromNow(),
          },
          ...this.comments,
        ];
        this.value = '';
      }, 1000);
    },
    handleChange(e) {
      this.value = e.target.value;
    },
  },
    created() {
        //   获取传过来的id
            console.log(this.$route.query.courseId)
        //    接口请求
            this.$axios.get(`http://wkt.myhope365.com/pc/course/detail/${this.$route.query.courseId}`).then(res=>{
                // console.log(res)
                this.courseDeail = res.data.data,
                this.score = res.data.score
            });
         
            comment(this.$route.query.courseId,6,1).then(res=>{
                console.log(res);
            })
        }
}
</script>
<style scoped>
/* .box {
  width: 200px;
  height: 200px;
  background-color: red;
} */
.detailsBox {
  background-color: #f4f4f4;
}
.payfor>span:nth-of-type(1) {
     color: red;
   }
   .payfor>span:nth-of-type(2) {
     color: #999;
     font-size: 12px;
     text-decoration: line-through;
   }
.tabBox {
   margin-top: 30px  !important; 
    margin: auto;
    width: 1200px;
    background-color: #fff;
}
.details {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;
  }
  
  .details>.pic {
    float: left;
    width: 330px;
    height: 220px;
  }
  .details>.content {
    float: left;
    margin-left: 50px;
    box-sizing: border-box;
    width: 600px;
  }
  .details>.pic>img {
    width: 330px;
    height: 220px;
  }
  .details>.content>h4 {
    margin: 10px 0;
    font-size: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 36px;
    line-height: 36px;
  }
  .details>.content>span {
    color: #5a5a5a;
  }
  .details>.content>p {
    margin: 10px 0;
    font-size: 24px;
    color: rgb(0, 207, 140);
  }
  .details>.content>button {
    margin-top: 30px;
    width: 160px;
    height: 45px;
    text-align: center;
    background-color: #00cf8c;
    font-size: 18px;
  }
  .details>.collection {
    cursor: pointer;
    text-align: center;
    width: 110px;
    height: 30px;
    font-size: 16px;
    line-height: 26px;
    border: 1px solid #999;
    color: #999;
    position: absolute;
    right: 30px;
    top: 30px; 
  }
  .details .xing {
    color: chocolate;
  }
  /* 目录 */
  #myTabContent {
    margin-top: 30px;
    padding: 0 30px;
  }
  #myTabContent>div>h4 {
    font-weight: 700;
  }
  #two dt {
    position: relative;
    height: 50px;
    line-height: 30px;
    padding: 10px 20px;
    background: #f2f2f2;
    margin: 10px 0;
    font-weight: normal;
  }
  #two dt .bf {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
  }
  .sectionList>h3 {
    font-size: 22px;
  }
  .minTitle {
    margin-left: 30px;
  }
</style>